<pre class="docs-method-signature"><code>vel.text(content [, opt])</code></pre>

<p>
        Set the text <code>content</code> of the element.
        This only makes sense for the <code data-lang="svg">&lt;text&gt;</code> element.
        This method can deal with multi-line text in case the <code>content</code> string contains newline characters (<code>\n</code>).
</p>

<pre><code>t.text('my text');
t.text('my multiline\ntext');</code></pre>

<h3>Alignment</h3>

<p>
        <code>opt.lineHeight</code> can be optionally used to set the line height of the text.
        It defaults to <code>'1em'</code>. The <code>opt.lineHeight</code> can also be set to <code>'auto'</code> in which case it is left on Vectorizer to set the best possible line height.
        This is useful if you annotate the text making it a rich-text (see below) and you don't want to set the line height to a fixed value for all the lines.
</p>

<p>
        Use <code>opt.textVerticalAnchor</code> to control the y-axis alignment relatively to the initial text position.
        The anchor position can be set by a keyword or a value in <code>px</code> or <code>em</code>.
        <ul>
                <li><code>'top'</code> - at the top of the text</li>
                <li><code>'bottom'</code> - at the bottom of the text</li>
                <li><code>'middle'</code> - in the middle of the text</li>
                <li><code>'0.3em'</code> - in the middle of the first line</li>
                <li><code>'0.8em'</code> - at the top edge of the first line <i>(default)</i></li>
                <li><code>'-0.3em'</code> - at the bottom edge of the first line</li>
                <li><code>0</code> or <code>'0em'</code> - at the baseline of the first line</li>
                <li><code>20</code> or <code>'20px'</code> - 20 pixels up from the baseline of the first line</li>
        </ul>

</p>
<pre><code>t.text('my text\nwith custom line height', {
  lineHeight: '2em'
});
t.attr('font-size', 20).text('vertically aligned text', {
  textVerticalAnchor: 'middle'
});</code></pre>

<p>
        <b>Note:</b> The method uses a heuristic algorithm to align the text.
        To improve the results, define the text <code>font-size</code> attribute in <code>px</code> and <code>lineHeight</code> option either in <code>px</code> or <code>em</code>.
        If a keyword or annotations are used and no <code>font-size</code> attribute is set on the text element, the font size defaults to <code>16</code>.
</p>

<h3>Annotations</h3>

<p>
        If <code>opt.annotations</code> array is set, the text will be annotated by the attributes defined in the annotations array.
        This means that you can easily render rich text.
        Each annotation in the annotations array is an object of the form <code>{ start: Number, end: Number, attrs: Object }</code> where <code>start</code> (inclusive) and <code>end</code> (exclusive) define the range of the text <code>content</code> where the <code>attrs</code> SVG Attributes will be applied.
        If there are overlapping annotations, they will be  smartly merged (classes concatenated, attributes merged, <code>style</code> can be always defined either as a string or an object).
</p>

<pre><code>var text = V('text', { x: 250, y: 150, fill: 'black' });
text.text('This is a rich text.\nThis text goes to multiple lines.', {
  lineHeight: 'auto',
  annotations: [
    { start: 5, end: 10, attrs: { fill: 'red', 'font-size': 30, rotate: '20' }},
    { start: 7, end: 15, attrs: { fill: 'blue' }},
    { start: 20, end: 30, attrs: { fill: 'blue', 'class': 'text-link', style: 'text-decoration: underline' }}
  ]
});
svg.append(text);</code></pre>

<p>
        If <code>opt.includeAnnotationIndices</code> is set to <code>true</code>, each <code data-lang="svg">&lt;tspan&gt;</code> will contain the <code>'annotations'</code> attribute with comma-separated indices of annotations that apply to that piece of text.
        Vectorizer provides some useful functions for working with annotations.
        Those are <a href="#V.findAnnotationsAtIndex">V.findAnnotationsAtIndex()</a>, <a href="#V.findAnnotationsBetweenIndexes">V.findAnnotationsBetweenIndexes()</a> <a href="#V.shiftAnnotations">V.shiftAnnotations()</a> and <a href="#V.annotateString">V.annotateString()</a>.
</p>


<h3>Text Along Path</h3>

<p>
        To make the text go along a path, use <code>opt.textPath</code>. It can be either string or an object.
</p>

<h4>string</h4>

<p>
        The provided <code>textPath</code> specifies the path data of the path the text should go along.
</p>

<pre><code>t.text('text that goes along a path', { textPath: 'M 0 100 Q 30 10 100 0' });</code></pre>

<h4>object</h4>

<p>
        The provided <code>textPath</code> can contain a <code>d</code> property that specifies the path data of the path the text should go along, and optionally other attributes that will be set on the automatically created <code data-lang="svg">&lt;textPath&gt;</code> SVG element, such as <code>startOffset</code>.
        If <code>textPath</code> contains <code>xlink:href</code> property, an existing path is used as reference.
</p>

<pre><code>t.text('another text that goes along a path', {
  textPath: {
    d: 'M 0 100 Q 30 10 100 0',
    startOffset: 50
  }
});
t.text('text that goes along an existing path', {
  textPath: { 'xlink:href': '#path1' }
});</code></pre>

<h3>Misc</h3>

<p>
        By default, the SVGTextElement without the content is not displayed (It is not clickable and occupies no space). To prevent this, use <code>opt.displayEmpty</code> and set it to <code>true</code>.
</p>


